<!--
 * @Author: your name
 * @Date: 2022-03-12 17:40:10
 * @LastEditTime: 2022-03-13 18:03:22
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue3-ts-food-admin\src\components\salesData\salesData.vue
-->
<template>
  <div class="salesDataContainer" :style="style" :class="className">
    <div class="homeSalesCont">
      <div class="salesContInnerLeft">
        <div class="salesLabelBig">今日营业额（元）</div>
        <div class="salesLabelSmall">截止5分钟前</div>
      </div>
      <div class="salesContInnerRight">
        {{ state.detail.sales }}
      </div>
    </div>
    <div class="homeOrdersCont">
      <div class="salesContInnerLeft">
        <div class="salesLabelBig">今日有效订单（个）</div>
        <div class="salesLabelSmall">截止5分钟前</div>
      </div>
      <div class="salesContInnerRight">
        {{ state.detail.orders }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, Ref } from "vue";
import { getCompanyDetail } from "@/api/cloud";
import { CompanyDetail } from "@/types/index";

export default defineComponent({
  setup() {
    const state = reactive<{ detail: CompanyDetail }>({
      detail: {
        tel: 0,
        addres: "",
        logoUrl: "",
        companyName: "",
        orders: 0,
        sales: 0,
        goodsCegetory: 0,
        goodsNumber: 1,
        memberNumber: 2,
        supplierNumber: 3,
      },
    });

    return { state };
  },
  props: {
    className: {
      type: String,
      default: "",
    },
    style: {
      type: String,
      default: "",
    },
  },
  mounted() {
    getCompanyDetail().then((res) => {
      const { data } = res;
      if (data.code === 200) {
        this.state.detail = data.result;
      }
    });
  },
});
</script>

<style lang="less" scoped>
.commonCard {
  border: 1px solid #ddd;
}
.salesDataContainer {
  width: 100%;
  height: 228px;
  display: flex;
  .homeSalesCont {
    margin-right: 60px;
    flex: 1;
    height: 100%;
    display: flex;
    padding-left: 32px;
    .commonCard;
  }
  .homeOrdersCont {
    flex: 1;
    height: 100%;
    display: flex;
    padding-left: 32px;
    .commonCard;
  }
  .salesContInnerLeft {
    flex: 1;
    display: flex;
    height: 100%;
    align-content: center;
    flex-wrap: wrap;
  }
  .salesContInnerRight {
    flex: 1;
    display: flex;
    height: 100%;
    align-items: center;
    font-size: 70px;
    color: #ff3131;
  }
  .salesLabelBig {
    font-weight: 600;
    font-size: 24px;
    color: #101010;
    margin-bottom: 30px;
    width: 100%;
  }
  .salesLabelSmall {
    color: #999;
    font-size: 14px;
    width: 100%;
  }
  .homeSalesCont {
    margin-right: 60px;
    flex: 1;
    height: 100%;
    display: flex;
    padding-left: 32px;
    .commonCard;
  }
}
</style>
